<template>
  <div>
    <div class="folder-view">
      <h2>医疗图片</h2>
      <ul class="folder-list" v-if="folderData.length > 0">
        <TreeNode
          v-for="item in folderData"
          :key="item"
          :node="item"
          @view-images="findTrue"
          @view-info="findInfo"
          @download-folder="downLoad"
        />
      </ul>
      <p v-else>{{ loading ? '加载中...' : '没有找到任何文件夹' }}</p>
    </div>

    <el-dialog title="图片预览" :visible.sync="imageDialogVisible" width="80%">
      <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        <div
          v-for="(url, index) in currentImages"
          :key="index"
          style="flex: 1 1 30%;"
        >
          <img
            :src="url"
            alt="图片"
            style="width: 100%; border-radius: 4px;"
          />
        </div>
      </div>
      <span slot="footer">
        <el-button @click="imageDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';
import http_request from '@/utils/request'; // 导入封装好的请求方法

export default {
  name: 'Show',
  components: {
    TreeNode
  },
  data() {
    return {
      folderData: [],
      loading: true,
      initialFolderPath: 'eye/',
      imageDialogVisible: false, // 控制弹窗显示
      currentImages: [], // 当前图片列表
    };
  },
  mounted() {
    this.fetchFolders(this.initialFolderPath);
  },
  methods: {
    async fetchFolders(folderPath) {
      this.loading = true;
      const url = '/medical/lable/listSubFolders'; // 使用相对路径
      const params = { folderPath };

      try {
        const res = await http_request(url, params, 'GET'); // 调用封装的方法
        this.folderData = res.data || [];
        console.info(res);
        console.log('获取到的文件夹列表:', this.folderData);
      } catch (error) {
        this.folderData = [];
        alert('请求文件夹列表失败，请检查后端是否启动或网络连接');
      } finally {
        this.loading = false;
      }
    },

    async findTrue(node) {
      const folderPath = `${this.initialFolderPath}${node}`;
      const url = '/medical/lable/listImageUrls'; // 使用相对路径
      const params = { folderPath };

      try {
        const res = await http_request(url, params, 'GET');
        const imageUrls = res.data || [];

        if (imageUrls.length > 0) {
          this.$message.success(`【${node}】中找到 ${imageUrls.length} 张图片`);
          this.currentImages = imageUrls;
          this.imageDialogVisible = true; // 显示弹窗
        } else {
          this.$message.warning('该文件夹中没有图片');
        }
      } catch (error) {
        console.error('获取图片失败:', error);
        this.$message.error('获取图片失败，请检查接口或网络');
      }
    },

    findInfo(node) {
      this.$message.info(`进入【${node}】查看详情`);
      // 可以在这里调用 http_request 获取详情信息
    },

    downLoad(node) {
      this.$message.success(`开始下载文件夹 【${node}】`);
      // 可以在这里调用 http_request 触发下载逻辑
    }
  }
};
</script>

<style scoped>
.folder-view {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.folder-list {
  list-style-type: none;
  padding-left: 0;
}

.folder-list li {
  margin-bottom: 10px;
}
</style>